"use client";
import { PlusOutlined } from '@ant-design/icons';
import type { ActionType, ProColumns } from '@ant-design/pro-components';
import { PageContainer, ProTable } from '@ant-design/pro-components';
import { Button, message, Space, Typography } from 'antd';
import React, { useRef, useState } from 'react';

import "./index.css";
import {deleteUserUsingGet, listUserByPageUsingPost} from "@/api/useController";
import CreateModal from "@/app/admin/user/compoents/createModel";
import UpdateModal from "@/app/admin/user/compoents/updateModel";

/**
 * 用户管理页面
 *
 * @constructor
 */
const UserAdminPage: React.FC = () => {
    // 是否显示新建窗口
    const [createModalVisible, setCreateModalVisible] = useState<boolean>(false);
    // 是否显示更新窗口
    const [updateModalVisible, setUpdateModalVisible] = useState<boolean>(false);
    const actionRef = useRef<ActionType>();
    // 当前用户点击的数据
    const [currentRow, setCurrentRow] = useState<API.UserVO>();

    /**
     * 删除节点
     *
     * @param row
     */
    const handleDelete = async (row: API.UserVO) => {
        const hide = message.loading('正在删除');
        if (!row) return true;
        try {
            await deleteUserUsingGet({
                id: row.id as any,
            });
            hide();
            message.success('删除成功');
            actionRef?.current?.reload();
            return true;
        } catch (error: any) {
            hide();
            message.error('删除失败，' + error.message);
            return false;
        }
    };

    /**
     * 表格列配置
     */
    const columns: ProColumns<API.UserVO>[] = [
        {
            title: 'id',
            dataIndex: 'id',
            valueType: 'text',
            hideInForm: true,
            hideInSearch: true,
        },
        {
            title: '账号',
            dataIndex: 'userAccount',
            valueType: 'text',
        },
        {
            title: '用户名',
            sorter: true,
            dataIndex: 'userName',
            valueType: 'text',
        },
        {
            title: '头像',
            dataIndex: 'userAvatar',
            valueType: 'image',
            fieldProps: {
                width: 64,
            },
            hideInSearch: true,
        },
        {
            title: '简介',
            ellipsis: true,  // 过长收缩
            dataIndex: 'userProfile',
            valueType: 'textarea',
            hideInSearch: true,
        },
        {
            title: '权限',
            dataIndex: 'userRole',
            valueEnum: {
                user: {
                    text: '用户',
                },
                admin: {
                    text: '管理员',
                },
            },
        },
        {
            title: '创建时间',
            sorter: true,
            dataIndex: 'createTime',
            valueType: 'dateTime',
            hideInSearch: true,
            hideInForm: true,
        },
        {
            title: '更新时间',
            sorter: true,
            dataIndex: 'updateTime',
            valueType: 'dateTime',
            hideInSearch: true,
            hideInForm: true,
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (_, record) => (
                <Space size="middle">
                    <Typography.Link
                        onClick={() => {
                            setCurrentRow(record);
                            setUpdateModalVisible(true);
                        }}
                    >
                        修改
                    </Typography.Link>
                    <Typography.Link type="danger" onClick={() => handleDelete(record)}>
                        删除
                    </Typography.Link>
                </Space>
            ),
        },
    ];

    return (
        <PageContainer>
            <ProTable<API.UserVO>
                headerTitle={'查询表格'}
                actionRef={actionRef}
                rowKey= "id"
                search={{
                    labelWidth: 'auto',
                }}
                form={{
                    ignoreRules: false,
                }}
                toolBarRender={() => [
                    <Button
                        type="primary"
                        key="primary"
                        onClick={() => {
                            setCreateModalVisible(true);
                        }}
                    >
                        <PlusOutlined /> 新建
                    </Button>,
                ]}
                request={async (params, sort, filter) => {
                    const sortField = Object.keys(sort)?.[0];
                    console.log(sortField);
                    const order = sort?.[sortField] ?? undefined;
                    let sortOrder = "asc";
                    if (order === "descend") {
                        sortOrder = "desc";
                    }
                    const { data, code } = await listUserByPageUsingPost({
                      ...params,
                      sortField,
                      sortOrder,
                      ...filter,
                    } as API.UserQueryRequest);

                    return {
                        success: code === 0,
                        data: data?.records || [],
                        total: Number(data?.total) || 0,
                    };
                }}
                columns={columns}
            />
            <CreateModal
                visible={createModalVisible}
                columns={columns}
                onSubmit={() => {
                    setCreateModalVisible(false);
                    actionRef.current?.reload();
                }}
                onCancel={() => {
                    setCreateModalVisible(false);
                }}
            />
            <UpdateModal
                visible={updateModalVisible}
                columns={columns}
                oldData={currentRow}
                onSubmit={() => {
                    setUpdateModalVisible(false);
                    setCurrentRow(undefined);
                    actionRef.current?.reload();
                }}
                onCancel={() => {
                    setUpdateModalVisible(false);
                }}
            />
        </PageContainer>
    );
};

export default UserAdminPage;
